Create an Even Shadow On an Element [migrated]

Posted by youarefunny on Pro Webmasters See other posts from Pro Webmasters or by youarefunny
Published on 2012-03-25T01:31:07Z Indexed on 2012/03/25 5:40 UTC
Read the original article Hit count: 166

Filed under:
|
|

When a box-shadow is applied to an element the corners are less "thick" than the middle because they don't have shadow on both sides. This creates an odd effect on full width elements.

http://jsfiddle.net/kevincox/6FhYe/18/

If you look at that example you will see that the edges are lighter. If the "banner" is at the top of a page you can spread it and shift it up but that doesn't work for the middle of the page as you can see the top.

I was wondering if anyone had a solution with no images and preferably cross-browser but I can deal with vendor prefixes for a bit. Is there something like a separate horizontal and vertical stretch?

© Pro Webmasters or respective owner

Related posts about html

Related posts about css